<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script>
        function tipUsername(){
            let s1 = document.getElementById("s1");
            s1.innerHTML = "<span style='color:blue;'>用户名由4-16位英文字母、数字、下划线组成</span>";
        }
        function checkUsername(){
            let username = document.getElementById("username").value;
            let regExp = /^[a-z]\w{3,15}$/i
            if(regExp.test(username)){
                document.getElementById("s1").innerHTML = "<span style='color:green'>用户名格式正确</span>";
                // document.getElementById("btn").disabled = false;
                return true;
            } else{
                document.getElementById("s1").innerHTML = "<span style='color:red'>用户名格式有误</span>";
                // document.getElementById("btn").disabled = true;
                return false;
            }
        }

        function checkPhone(){
            let phone = document.getElementById("phone").value;
            let regExp = /^[1][34589]\d{9}$/;
            if(regExp.test(phone)){
                document.getElementById("s2").innerHTML = "<span style='color:green;'>手机号码格式正确</span>";
                // document.getElementById("btn").disabled = false;
                return true;
            } else{
                document.getElementById("s2").innerHTML = "<span style='color:red;'>手机号码格式有误</span>";
                // document.getElementById("btn").disabled = true;
                return false;
            }
        }
        function checkEmail(){
            let email = document.getElementById("email").value;
            let regExp = /^[0-9a-z]\w+[@][0-9a-z]+(\.com)(\.cn)?$/i;
            if(regExp.test(email)){
                document.getElementById("s3").innerHTML = "<span style='color:green;'>电子邮箱格式正确</span>";
                return true;
            } else{
                document.getElementById("s3").innerHTML = "<span style='color:red;'>电子邮箱格式有误</span>";
                return false;
            }
        }
        function checkIdcard(){
            let idcard = document.getElementById("idcard").value;
            let regExp = /^\d{15}(\d{2}[0-9X])?$/;
            if(regExp.test(idcard)){
                document.getElementById("s4").innerHTML = "<span style='color:green;'>身份证号码格式正确</span>";
                return true;
            } else{
                document.getElementById("s4").innerHTML = "<span style='color:red;'>身份证号码格式有误</span>";
                return false;
            }
        }

        function checkForm(){
            if(checkUsername() && checkPhone() && checkEmail() && checkIdcard()){
                // document.getElementById("btn").disabled = false;
                return true;
            }
            // document.getElementById("btn").disabled = true;
            return false;
        }
    </script>
</head>
<body>
<!--
    表单校验事件:onsubmit="return xxx"
    当返回值为false时,无法提交表单,否则均可以提交
-->
<form action="01-引入方式.html" method="post" onsubmit="return checkForm()">
<!--<form action="01-引入方式.html" method="post">-->
    用户名:<input type="text" id="username" onfocus="tipUsername()" onblur="checkUsername()"><span id="s1"></span><br>
    手机号:<input type="text" id="phone" onblur="checkPhone()"><span id="s2"></span><br>
    邮箱:<input type="text" id="email" onblur="checkEmail()"><span id="s3"></span><br>
    身份证:<input type="text" id="idcard" onblur="checkIdcard()"><span id="s4"></span><br>
    <input type="submit" id="btn" value="提交">
</form>
</body>
</html>